<template>
	<div class="flowTime" style="margin-top: 15px">
		<a-timeline>
			<a-timeline-item :key="index" v-for="(item, index) in record">
				{{ item.taskName }} {{ item.startTime }}
				<p class="timeline-item-p" style="margin-top: 10px">
					<user-outlined /> {{ item.operator }} 
					<span v-if="item.type == 'fqOpinion'" style="background: #5793f1; color: #fff; padding: 3px 10px">发起申请</span>
					<span v-else>
						<span v-if="item.message == null" style="background: #a3a6ad; color: #fff; padding: 3px 10px">待审批</span>
						<span v-else>
							<span v-if="item.status == '1'" style="background: #5793f1; color: #fff; padding: 3px 10px">{{
								$TOOL.dictTypeData('FLOW_APPROVAL_STATUS', item.status)
							}}</span>
							<span v-if="item.status == '2'" style="background: #a3a6ad; color: #fff; padding: 3px 10px">{{
								$TOOL.dictTypeData('FLOW_APPROVAL_STATUS', item.status)
							}}</span>
							<span v-if="item.status == '3'" style="background: #fa541c; color: #fff; padding: 3px 10px">{{
								$TOOL.dictTypeData('FLOW_APPROVAL_STATUS', item.status)
							}}</span>
							<span v-if="item.status == '4'" style="background: #18ff41; color: #fff; padding: 3px 10px">{{
								$TOOL.dictTypeData('FLOW_APPROVAL_STATUS', item.status)
							}}</span>
							<span v-if="item.status == '5'" style="background: #f56c6c; color: #fff; padding: 3px 10px">{{
								$TOOL.dictTypeData('FLOW_APPROVAL_STATUS', item.status)
							}}</span>
							<span v-if="item.status == '6'" style="background: #bba920; color: #fff; padding: 3px 10px">{{
								$TOOL.dictTypeData('FLOW_APPROVAL_STATUS', item.status)
							}}</span>
							<span v-if="item.status == '7'" style="background: #bba920; color: #fff; padding: 3px 10px">{{
								$TOOL.dictTypeData('FLOW_APPROVAL_STATUS', item.status)
							}}</span>
							<span v-if="item.status == '8'" style="background: #bba920; color: #fff; padding: 3px 10px">{{
								$TOOL.dictTypeData('FLOW_APPROVAL_STATUS', item.status)
							}}</span>
						</span>
					</span>
					<p style="margin-top: 10px;background: #d9d9d9">
						<message-outlined /> {{item.message == null?'无':item.message}}
					</p>
					<span> <file-outlined /> 附件： </span>
					<div>
						<a v-for="(file, findex) in item.attachs" :key="findex" @click="fileRef.onOpen(file)">{{ file.attachName }}<br /></a>
					</div>
				</p>
			</a-timeline-item>
		</a-timeline>
	</div>
	<filePreview ref="fileRef" />
</template>
<script setup name="flowRecord">
	import tool from '@/utils/tool'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import flowJobApi from '@/api/flow/flowJobApi'
	import filePreview from '../../myApply/detail/filePreview.vue'
	import { onMounted } from 'vue'
	const props = defineProps({
		data: {
			type: Object,
			required: false
		}
	})
	const activeTabsKey = ref('1')
	const record = ref()
	const fileRef = ref()

	const init = () => {
		flowJobApi.findFlowRecord({ instanceId: props.data.instanceId }).then((res) => {
			record.value = res
		})
	}
	// 获取颜色
	const getTimelineColor = (value) => {
		if (value === 'LOGIN') {
			return 'blue'
		}
		if (value === 'LOGOUT') {
			return 'gray'
		}
	}

	onMounted(async () => {
		await init()
	})
</script>
